/**
 * @author kobe
 * @author truexin
 * @date   16/07/26
 */

import FooterBtn from '../components/detail/FooterBtn';
import BottomForm from '../components/detail/BottomForm';

var RC = React.createClass,
    lf = liefeng,
    ajax = lf.utils.ajax,
    api = lf.api,
    setTitle = lf.bridgeJs.setTitle,
    getUrlParam = lf.utils.getUrlParam,
    doAction = lf.bridgeJs.doAction,
    doClose = lf.bridgeJs.doClose;

const TYPE = getUrlParam('type'),
    CHECK = 'CHECK',
    PUBLISH = "PUBLISH",
    PDF = 'https://pdf.h5.liefengtech.com/web/viewer.html?file=';

var DataList = RC({
    componentDidUpdate(){
        var $content = React.findDOMNode(this.refs.innerHtml);
        
        $content.innerHTML = this.props.data.content;
        let $links = $($content).find('a');
        $.each($links, function () {
            let $me = $(this),
                $href = $me.attr('href'),
                $title = $me.attr('title'),
                url = PDF + encodeURIComponent($href);
            $me.parent().find('img').addClass('ele-hide');
            $me.removeAttr('href'); //阻止a默认跳转
            
            if ($href && $href.indexOf('.pdf') > -1) {
                $me.addClass('link icon-pdf text-dot');
                $me.off();
                $me.on('tap', function () {
                    doAction(url, $title);
                })
            }
        })
    },
    render(){
        var data = this.props.data,
            endTime = lf.utils.format(data.endTime, 'yyyy-MM-dd hh:mm'),
            startTime = lf.utils.format(data.startTime, 'yyyy-MM-dd hh:mm'),
            priority = '',
            type = '';
        
        switch (data.type)  //显示类型
        {
            case '1':
                type = '社区活动'
                break;
            case '2':
                type = '温馨提醒'
                break;
            case '3':
                type = '通知'
                break;
            case '4':
                type = '物业动态'
                break;
            case '5':
                type = '管理制度'
                break;
            case '6':
                type = '生活资讯'
                break;
        }
        
        switch (data.priority) //显示重要性信息
        {
            case '00':
                priority = ''
                break;
            case '01':
                priority = '紧急'
                break;
            case '10':
                priority = '重要'
                break;
            case '11':
                priority = '紧急 重要'
                break;
        }
        
        return (
            <div className="list">
                <table>
                    <tr>
                        <td>公布范围:</td>
                        <td>{data.privilegeString}</td>
                    </tr>
                    <tr>
                        <td>重要性:</td>
                        <td>{priority}</td>
                    </tr>
                    <tr>
                        <td>公布时效:</td>
                        <td>{endTime}</td>
                    </tr>
                    <tr>
                        <td>公布日期:</td>
                        <td>{startTime}</td>
                    </tr>
                    <tr>
                        <td>接受设备:</td>
                        <td>{data.terminalNameString}</td>
                    </tr>
                    <tr>
                        <td>通告类型:</td>
                        <td>{type}</td>
                    </tr>
                    <tr>
                        <td>通告名称:</td>
                        <td>{data.title}</td>
                    </tr>
                    <tr>
                        <td>通告内容:</td>
                    </tr>
                </table>
                <div ref="innerHtml" className="rich-text"></div>
            </div>
        )
        
    }
})


var CheckBottom = RC({ //审核详情底部
    getInitialState(){
        return ({
            formVisible: '',
            formConVisible: '',
            isFeedback: '',
        })
    },
    showFeedback() {
        this.setState({
            formVisible: 'this',
            formConVisible: 'this',
            isFeedback: true,
        });
    },
    itemRender() {
        return (
            <div className="bottom-form">
                <textarea placeholder="驳回原因(必填)" name="result" id="result"></textarea>
            </div>
        )
    },
    hideBottomForm() {
        this.setState({
            formVisible: '',
            formConVisible: '',
        });
    },
    havePass(){
        var me = this;
        ajax({
            type: "post",
            data: {
                noticeId: getUrlParam('noticeId'),
                staffId: me.props.user.id,
            },
            success: function (data) {
                if (data.code == 200) {
                    mui.toast('审批通过');
                    setTimeout(function () {
                        doClose()
                    }, 1000)
                } else {
                    alert(data.desc, () => lf.appJs.doClose());
                }
            }
        }, api.worktable.pass);
    },
    feedbackConfirm(){
        var me = this,
            result = $('#result').val();
        
        if (result == '') {
            mui.toast('请填写驳回原因');
            return;
        } else {
            console.log(result);
            ajax({
                type: "post",
                data: {
                    noticeId: getUrlParam('noticeId'),
                    staffId: me.props.user.id,
                    reason: result
                },
                success: function (data) {
                    if (data.code == 200) {
                        mui.toast('成功驳回');
                        setTimeout(function () {
                            doClose()
                        }, 1000)
                    } else {
                        alert(data.desc, () => lf.appJs.doClose());
                    }
                }
            }, api.worktable.refuse);
        }
    },
    render(){
        let footerBtn = [
                {aLinkClass: 'green', clickHandler: this.showFeedback, text: '驳回'},
                {aLinkClass: 'green ', clickHandler: this.havePass, text: '通过'},
            ],
            formFooterBtn = [
                {aLinkClass: 'green ', clickHandler: this.hideBottomForm, text: '取消'},
                {aLinkClass: 'green', clickHandler: this.feedbackConfirm, text: '确定'},
            ];
        
        return (
            <div>
                <FooterBtn data={footerBtn}/>
                <BottomForm
                    itemRender={this.itemRender}
                    formFooterBtn={formFooterBtn}
                    formVisible={this.state.formVisible}
                    formConVisible={this.state.formConVisible}
                />
            </div>
        )
    }
})

var PublishBottom = RC({ //发布底部
    componentDidMount(){
        var $release = React.findDOMNode(this.refs.release);
        var me = this;
        
        $($release).on('tap', function () {
            var noticeId = getUrlParam('noticeId');
            ajax({
                type: "POST",
                data: {
                    noticeId: noticeId,
                    staffId: me.props.user.id,
                },
                success: function (data) {
                    if (data.code == 200) {
                        mui.toast('发布成功');
                        setTimeout(function () {
                            doClose()
                        }, 1000)
                    } else {
                        alert(data.desc, () => lf.appJs.doClose());
                    }
                }
            }, lf.api.worktable.noticePublish);
        });
    },
    render(){
        var data = this.props.data;
        
        return (
            <div className="check-bottom check-info">
                <table>
                    <tr>
                        <td>审核人:</td>
                        <td>{data.reviewerName}</td>
                        <td>状态:</td>
                        <td>已通过</td>
                    </tr>
                    <tr className="time">
                        <td>审核时间:</td>
                        <td>{lf.utils.format(data.reviewTime, 'yyyy-MM-dd hh:mm')}</td>
                    </tr>
                </table>
                <a className="mui-btn mui-btn-success mui-btn-block release" href="javascript:;" ref="release">发布</a>
            </div>
        )
    }
})

var Container = RC({
    getInitialState: function () {
        return ({
            data: [],
            isFeedback: '',
            isApproved: '',
        })
    },
    showFeedback() {
        this.setState({
            formVisible: 'this',
            formConVisible: 'this',
            isFeedback: true,
        });
    },
    componentWillMount: function () {
        var me = this;
        ajax({
            data: {
                noticeId: getUrlParam('noticeId'),
            },
            success: function (data) {
                if (data.code == 200) {
                    var data = data.data;
                    setTitle(data.title);
                    me.setState({data: data})
                } else {
                    alert(data.desc);
                }
            }
        }, api.notice.getNotice);
    },
    render: function () {
        if (TYPE == CHECK) {
            var bottomInfo = <CheckBottom data={this.state.data} user={this.props.user}/>
        } else if (TYPE == PUBLISH) {
            var bottomInfo = <PublishBottom data={this.state.data} user={this.props.user}/>
        }
        
        return (
            <div className="notice-detail">
                <DataList data={this.state.data} user={this.props.user}/>
                {bottomInfo}
            </div>
        );
    }
});

lf.bridgeJs.getUser(function (user) {
    React.render(
        <Container user={user}/>,
        document.getElementById('root'), function () {
            $('#root').css('background', 'none');
        }
    )
})
